<template>
    <div class="watch-person">
    <h1 ref="title1">Show ref title</h1>
     <button @click="ShowTitle">
        点击查看
    </button>

    <h1>通过watch监视 reactive 定义的对象</h1>
    </div>
</template>

<script setup lang="ts" name="PersonRef">
import { ref } from 'vue'

//  通过ref取出html显示的内容
 let title1 = ref<HTMLElement | null>(null)
    function  ShowTitle() {
        console.log(title1.value)
    }

</script>

<style scoped>
h1 {
    color: #42b983;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}
button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #369870;
}
</style>